<template>
	<hr>
	<input type="text" v-model="test">
	<h2>user:{{test}}</h2>
	<!-- <h3>姓名：{{data.user.name}}</h3> -->
	<h3>姓名：{{user.name}}</h3>
	<li v-for="item in list ">
		{{item}}
	</li>
	<hr>
	<p>
		姓：<input type="text" v-model="firstName">
	</p>
	<p>
		名：<input type="text" v-model="lastName">
	</p>
	<h4>全名：{{fullName}}</h4>
	
	<button @click="getFullName">获取计算属性</button>
</template>

<script>

	import {ref,toRefs,reactive,computed} from 'vue'
	export default{
		setup(){
			//reactive创建响应式数据对象
			const data = reactive({
				test:"测试",
				user:{
					name:"木道人",
					sex:"男"
				},
				list:["特斯拉","追梦","请叫我小平头"]
			})
			
			//创建一个响应式对象 user
			const user = reactive({
				firstName:"",
				lastName:""
			})
			
			//它会根据user的值 创建一个响应式的计算属性fullName 自动计算并返回一个新的响应式数据(ref)
			const fullName = computed(()=>{
				return user.firstName + " " + user.lastName
			})
			
			const getFullName = ()=>{
				console.log(fullName.value)
			}
			
			return{
				// 解构响应式对象数据
				/* 用 ...扩展运算结构响应式对象数据，是不可行。因为结构后就变成成了一个普通变量，不在具有响应式的能力 */
				// ...data 
				// toRefs 把一个响应式的对象转换成普通对象，对data进行了包装，再使用...拓展符的方式将data解构
				...toRefs(data),
				...toRefs(user),fullName,getFullName
			}
		}
	}
</script>
<style>
</style>
